<script type="text/javascript">
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".style-switcher-body").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
</script>

<div class="style-switcher clearfix">
  <div class="style-switcher-toggler">
    <a class="trigger" href="#"><img src="<%= public_url %>_include/images/misc/x.gif" width="30" height="123" alt="" /></a>
  </div>
  <div class="style-switcher-body">
    <h4>Escolha a Cor</h4>
    <ul class="clearfix">
      <li><a href="javascript:chooseStyle('pink', 60)"><img src="<%= public_url %>_include/images/misc/color-pink.png" alt="pink" /></a></li>
      <li><a href="javascript:chooseStyle('green', 60)"><img src="<%= public_url %>_include/images/misc/color-green.png" alt="green" /></a></li>
      <li><a href="javascript:chooseStyle('orange', 60)"><img src="<%= public_url %>_include/images/misc/color-orange.png" alt="orange" /></a></li>
      <li><a href="javascript:chooseStyle('pink-dark', 60)"><img src="<%= public_url %>_include/images/misc/color-pink-dark.png" alt="pink-dark" /></a></li>
      <li><a href="javascript:chooseStyle('green-dark', 60)"><img src="<%= public_url %>_include/images/misc/color-green-dark.png" alt="green-dark" /></a></li>
      <li><a href="javascript:chooseStyle('orange-dark', 60)"><img src="<%= public_url %>_include/images/misc/color-orange-dark.png" alt="orange-dark" /></a></li>
    </ul>
  </div>
</div>
<!-- end style switcher -->
